import React from "react";
import _ from 'lodash'
import {Tabs, Button, Dropdown, Menu as AntdMenu, Form as AntdForm} from 'antd';

const {TabPane} = Tabs;

interface AppTabProp {
    tabBarExtraContent: any
    onChange?: (sender: AppTab, activeKey: string) => void
}

interface PageTab {
    title: string | React.ReactNode
    key: string
    content: React.ReactNode
}

interface AppTabState {
    activeKey: string
    panes: PageTab[]
}

let newTabIndex = 0;

export default class AppTab extends React.Component<AppTabProp, AppTabState> {
    constructor(props: any) {
        super(props);

        this.state = {
            activeKey: '',
            panes: [],
        };
    }

    private onChange(activeKey: any) {
        this.setState({activeKey},
            () => {
                if (this.state.panes.length <= 0) {
                    activeKey = ''
                }
                if (this.props.onChange) {
                    this.props.onChange.call(this, this, activeKey)
                }
            });
    };

    private onEdit(targetKey: any, action: any) {
        // @ts-ignore
        this[action](targetKey);
    };

    /**
     * 关闭所有标签
     */
    closeAll() {
        this.setState({
            panes: []
        }, () => {
            if (this.props.onChange) {
                this.props.onChange.call(this, this, '')
            }
        })
    }

    /**
     * 关闭其他标签
     */
    closeOther(targetKey: string) {
        const panes = this.state.panes.filter(pane => pane.key === targetKey);
        this.setState({panes, activeKey: targetKey});
    }

    /**
     * 关闭某个标签
     */
    closeMe(key: string) {
        this.remove(key)
    }

    render() {

        const getMenu = (panel: PageTab) => {
            const {key} = panel
            return (
                <AntdMenu>
                    <AntdMenu.Item key="closeAll" onClick={() => this.closeAll.call(this)}>全部关闭</AntdMenu.Item>
                    <AntdMenu.Item key="closeOther" onClick={() => this.closeOther.call(this, key)}>关闭其他</AntdMenu.Item>
                    <AntdMenu.Divider/>
                    <AntdMenu.Item key="closeMe" onClick={() => this.closeMe.call(this, key)}>关闭</AntdMenu.Item>
                </AntdMenu>
            )
        }

        return (
            <Tabs
                hideAdd
                onChange={this.onChange.bind(this)}
                activeKey={this.state.activeKey}
                type="editable-card"
                onEdit={this.onEdit.bind(this)}
                tabBarExtraContent={this.props.tabBarExtraContent}
                className="app-tab"
            >
                {this.state.panes.map(pane => (
                    <TabPane tab={
                        <Dropdown overlay={getMenu(pane)} trigger={['contextMenu']}>
                            <div>{pane.title}</div>
                        </Dropdown>
                    } key={pane.key}>
                        {pane.content}
                    </TabPane>
                ))}
            </Tabs>
            // <Dropdown overlay={menu} trigger={['contextMenu']}><div style={{width:'100%',height:'100%'}}>ABC</div></Dropdown>
        );
    }

    /**
     * 判断标签是否存在
     */
    contains(key: string): boolean {
        return this.state.panes.some((pane, i) => {
            return (pane.key === key)
        });
    }

    /**
     * 选中某个标签
     */
    select(activeKey: string) {
        this.setState({activeKey},
            () => {
                if (this.props.onChange) {
                    this.props.onChange.call(this, this, activeKey)
                }
            });
    }

    /**
     * 添加标签
     */
    add(tab: PageTab) {
        const {panes} = this.state;
        // const activeKey = `newTab${newTabIndex++}`;
        // panes.push({title: 'New Tab', content: 'New Tab Pane', key: activeKey});
        const activeKey = tab.key
        panes.push(tab);
        this.setState({panes, activeKey},
            () => {
                if (this.props.onChange) {
                    this.props.onChange.call(this, this, activeKey)
                }
            });
    }

    /**
     * 根据 key 改变 tab.title 和 tab.content
     */
    changeContent(key: string, opt: any) {
        const {panes} = this.state;

        const panel = panes.find((k) => k.key === key)
        _.extend(panel, opt)

        this.setState({
            panes
        })
    }

    /**
     * 移除标签
     */
    remove(targetKey: any) {
        let {activeKey} = this.state;
        let lastIndex: any;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
                activeKey = panes[lastIndex].key;
            } else {
                activeKey = panes[0].key;
            }
        }
        if (panes.length <= 0) {
            activeKey = ''
        }
        this.setState({panes, activeKey},
            () => {
                if (this.props.onChange) {
                    this.props.onChange.call(this, this, activeKey)
                }
            }
        );
    }
}